<template>
  <div class="column">
   
	<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
	  <van-list
	    v-model="loading"
	    :finished="finished"
	    finished-text="没有更多了"
	    @load="onLoad"
	  >
	    <van-cell
	    v-for="(item,index) of column"
	    :key="item._id"
	     :title="item.title" 	  
	     :label="item.des"
	     :to="`/column/${item._id}?collectionName=column`"
	    />
	  </van-list>
	</van-pull-refresh>	
		
  </div>
</template>

<script>
  export default {
    name:'column',
    props:{},
    data(){
      return {
         column:[],
		 list: [],
	   loading: false,
	   finished: false,
	   refreshing: false,
      }
    },
    components:{},
    mounted(){
		this.$axios.get(`/news/column`,{params:{_limit:30,_page:1}}).then(
			res=>this.column=res.data)
	},
    updated(){},
    methods:{
		onLoad() {
		      setTimeout(() => {
		        if (this.refreshing) {
		          this.list = [];
		          this.refreshing = false;
		        }
		
		        for (let i = 0; i < 10; i++) {
		          this.list.push(this.list.length + 1);
		        }
		        this.loading = false;
		
		        if (this.list.length >= 40) {
		          this.finished = true;
		        }
		      }, 1000);
		    },
		    onRefresh() {
		      // 清空列表数据
		      this.finished = false;
		
		      // 重新加载数据
		      // 将 loading 设置为 true，表示处于加载状态
		      this.loading = true;
		      this.onLoad();
		    },
	},
    computed: {
    }
  }
</script>

<style>
  .column{
	  margin: 1.25rem 0;
  }
</style>

